<template>
<div>
  <div id="artist">
    <img :src="artist.cover">
    <div id="detail">
      <el-row>
        <el-col :xs="24">
          <h2>{{artist.name}}</h2>
        </el-col>
        <el-col :xs="24">
          <div id="dynamic">
            <i class="el-icon-bank-card" >专辑数：{{artist.albumSize}}</i>
            <i class="el-icon-headset">作曲数：{{artist.musicSize}}</i>
            <i class="el-icon-video-camera">视频数：{{artist.mvSize}}</i>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div>
    <el-tabs v-model="activeName" >
        <el-tab-pane label="单曲" name="song">
          <m-song-table :data="tableData" :height="500"></m-song-table>
        </el-tab-pane>

        <el-tab-pane label="MV" name="mv">
          <div style="margin-top:20px">
            {{this.mvData}}
            <m-move-list :MvData="mvData"></m-move-list>
          </div>
        </el-tab-pane>

        <el-tab-pane label="歌手详情" name="desc">
          <div id="introduce">
            <h2 style="color: #303133">歌手简介：</h2>
            <span style="color: #606266;">{{briefDesc}}</span>
            <div v-for="intro in introduction" :key="intro.index">
              <h2 style="color: #303133">{{intro.ti}}</h2>
              <span style="color: #606266;">{{intro.txt}}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
  </div>

</div>
</template>

<script>
import songs from "@/musicApi/apis/songs";
import music from "@/until/js/music";
import songTable from "@/components/aplayer/songTable";
import moveList from "@/components/aplayer/moveList";
export default {
  name: "artist",
  components:{
    'm-song-table':songTable,
    'm-move-list':moveList
  },
  data(){
    return{
      id:0,
      artist:[],
      activeName:'song',
      introduction:[],
      briefDesc:'',
      tableData:[],
      mvData:[]
    }
  },
  mounted() {
    this.id=this.$route.query.id
    this.getArtistDetail(this.id)
    this.getArtistDesc(this.id)
    this.getArtistSong(this.id)
    this.getArtistMv(this.id)
  },
  methods:{
    //获取歌手详情
    getArtistDetail(id) {
        songs.getArtistDetail(id).then(res=>{
          this.artist=res.data.data.artist
        })
      },
    //获取歌手描述
    getArtistDesc(id) {
      songs.getArtistDesc(id).then(res=>{
        this.introduction=res.data.introduction
        this.briefDesc=res.data.briefDesc
      })
    },
    //获取歌手单曲
    getArtistSong(id){
      songs.getArtistSong(id).then(res=>{
        this.tableData=music.getSongsData(res.data.hotSongs)
      })
      },
    //获取歌手mv
    getArtistMv(id) {
      songs.getArtistMv(id).then(res=>{
        this.mvData=res.data.mvs
      })
    }
  },

}
</script>

<style scoped>
#artist{
  display: flex;
  margin-top: 70px;
}
#artist img{
  display: block;
  margin-right: 25px;
  height: 130px;
  }
#detail{
}
#dynamic{

}
#dynamic i{
  padding-right: 20px;
  color: #606266;
}
#introduce{
  font-size: larger;
  height: 1000px;
}
</style>